<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
    <head>
        <th:block th:include="include :: head('使用外部文本')" />
    </head>
    <body>
        <body>
            <div id="demo" class="collapse in">
                <form>
                    <div class="form-row">
                        <div class="col-2">
                            <input type="text" class="form-control" placeholder="City">
                        </div>
                        <div class="col-2">
                            <input type="text" class="form-control" placeholder="State">
                        </div>
                        <div class="col-2">
                            <input type="text" class="form-control" placeholder="Zip">
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-danger mb-2">Search</button>
                        </div>
                    </div>
                </form>
            </div>
            <div id="tableToolbar">
                <div class="form-inline " role="form">
                    <button type="button" class="btn btn-outline-success"  data-toggle="tooltip"   title="新建" ><i class="fas fa-file-alt"></i></button>
                    <button type="button" class="btn btn-outline-warning" data-toggle="tooltip"   title="修改" ><i class="fas fa-pencil-alt "></i></button>
                    <button type="button" class="btn btn-outline-danger" data-toggle="tooltip"     title="删除" ><i class="fas fa-trash-alt "></i></button>

                    <div class="form-group">
                        <input name="search" class="form-control" type="text" placeholder="Search">
                    </div>
                    <button  type="submit" class="btn btn-outline-secondary"  data-toggle="tooltip"   title="查询" ><i class="fas fa-search "></i></button>
                    <button id="searchMore"  type="submit" class="btn btn-outline-danger"  data-toggle="tooltip" 
                            title="更多查询" onclick='$("#demo").collapse("toggle");'><i class="fab fa-searchengin fa-1x" ></i>...</button>
                </div>  

            </div>


            <table id="table">      </table>

            <div th:replace="include :: footer"></div>
            <!-- Page specific javascripts-->
            <script th:src="@{/static/oldtoys/js/BSTable.js}"></script>
            <script>
                $(document).ready(function () {
                    var SampleTable = {
                        id: "table",

                        initColumn: function () {
                            var columns = [
                                {field: 'id', title: 'ID'},
                                {field: 'name', title: '名称'},
                                {field: 'price', title: '价格'}
                            ];
                            return columns;
                        },
                        options: {
//                            height: 500,
//                            pagination: true,
//                            showPaginationSwitch: true,
//                            pageSize: 2, //每页的记录行数（*）
//                            pageList: [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 100],
                            sidePagination: 'client',
//                            iconSize: 'sm', //lg sm
//                            buttonsToolbar: '.buttons-toolbar'
//                            buttonsAlign: 'left',
//                            buttonsClass: 'outline-primary'//primary secondary success danger warning info light dark / outline-warning
                        }};
                    var table = new BTable(SampleTable.id, "/static/json/data1.json", SampleTable.initColumn(), SampleTable.options);
                    SampleTable.table = table.init();
                    $("[data-toggle='tooltip']").tooltip({delay: {show: 500, hide: 100}});
//                    $("#searchMore").collapse('toggle');
                })
            </script>

        </body>
</html>